<template>
    <div>
        <Row :gutter="10">
            <Col>
            <Card>
                <Row :gutter="10">
                    <div style="float:right;margin-bottom: 10px;">
                        <DatePicker type="daterange" v-model="filter.created_at" @on-change="search" placement="bottom-end" placeholder="选择下单时间" style="width: 200px; margin-right: 10px;"></DatePicker>
                    </div>
                    <div style="float:right;margin-bottom: 10px;">
                        <Input v-model="filter.phone" @on-search="search" search enter-button="查询" placeholder="请输入下单人机号"
                           style="width:180px; margin-right: 10px;float: right;top:0;font-size: 14px;"/>
                    </div>
                    <div style="float:right;margin-bottom: 10px;">
                        <Input v-model="filter.order_sn" @on-search="search" search enter-button="查询" placeholder="请输入订单编号"
                           style="width:180px; margin-right: 10px;float: right;top:0;font-size: 14px;"/>
                    </div>
                    <div style="float:right;margin-bottom: 10px;">
                        <Input v-model="filter.code" @on-search="search" search enter-button="查询" placeholder="请输入邀请码"
                           style="width:180px; margin-right: 10px;float: right;top:0;font-size: 14px;"/>
                    </div>
                    <div style="float:right;margin-bottom: 10px;">
                        <Select v-model="filter.state" style="width:160px;margin-right:10px;float: right;" @on-change="search" placeholder="订单状态">
                            <Option value="-1">全部</Option>
                            <Option value="0">待付款</Option>
                            <Option value="1">待发货</Option>
                            <Option value="2">待收货</Option>
                            <Option value="3">已完成</Option>
                            <Option value="4">退款中</Option>
                            <Option value="5">退款成功</Option>
                            <Option value="6">退款失败</Option>
                        </Select>
                    </div>
                </Row>
                <Row class="margin-top-10 table_pattern">
                    <Table :columns="columns" :data="list"></Table>
                </Row>
                <Row class="margin-top-10">
                    <Page :total="pagenation.totalPage" :page-size="pagenation.perPage"
                          :current="pagenation.currentPage" show-elevator show-total @on-change="change"></Page>
                </Row>
            </Card>
            </Col>
        </Row>
        <Modal v-model="show_refund_audit" title="退款审核" width="760px" :mask-closable="false" class="goods_modal">
            <p>退款理由: {{current_order.refund_reason}}</p>
            <Form v-model="refund_info"  ref="refund_info" :label-width="80">
                <FormItem label="审核结果" prop="default">
                  <RadioGroup v-model="refund_info.result">
                      <Radio label="1">同意</Radio>
                      <Radio label="2">拒绝</Radio>
                  </RadioGroup>
                </FormItem>
                <FormItem label="理由" prop="reason">
                    <Input type="textarea" :rows="4" v-model="refund_info.reason" placeholder="理由" style="width: 370px;"/>
                </FormItem>
                <FormItem>
                    <Button type="primary" @click="orderAuditSubmit()" style="width: 90px;height: 35px;border-radius: 0;font-size: 14px;">提交</Button>
                </FormItem>
            </Form>
        </Modal>
        <Modal v-model="show_send_order" title="订单发货" width="500px" :mask-closable="false" class="goods_modal">
            <Form v-model="refund_info"  ref="order_send_info" :label-width="80">
                <FormItem label="物流名称" prop="send_name">
                    <Input v-model="order_send_info.send_name" placeholder="物流名称" style="width: 370px;"/>
                </FormItem>
                <FormItem label="物流单号" prop="send_code">
                    <Input v-model="order_send_info.send_code" placeholder="物流单号" style="width: 370px;"/>
                </FormItem>
                <FormItem>
                    <Button type="primary" @click="orderSendSubmit()" style="width: 90px;height: 35px;border-radius: 0;font-size: 14px;">提交</Button>
                </FormItem>
            </Form>
        </Modal>
        <Modal v-model="show_order_info" title="订单详情" width="700px" :mask-closable="false" class="goods_modal">
          <Form :label-width="120" style='margin-left:60px'>
            <FormItem label="下单人手机号">
              <Input v-model="order_info.phone" readonly style="width: 370px;"/>
            </FormItem>
            <FormItem label="下单人昵称">
              <Input v-model="order_info.nickname" readonly style="width: 370px;"/>
            </FormItem>
            <FormItem label="邀请人昵称">
              <Input v-model="order_info.invite_nickname" readonly style="width: 370px;"/>
            </FormItem>
            <FormItem label="邀请码">
              <Input v-model="order_info.invite_code" readonly style="width: 370px;"/>
            </FormItem>
            <FormItem label="订单号">
              <Input v-model="order_info.order_sn" readonly style="width: 370px;"/>
            </FormItem>
            <FormItem label="订单金额">
              <Input v-model="order_info.money" readonly style="width: 370px;"/>
            </FormItem>
            <FormItem label="返佣金额">
              <Input v-model="order_info.return_money" readonly style="width: 370px;"/>
            </FormItem>
            <FormItem label="订单状态">
              <Input v-model="order_info.state_name" readonly style="width: 370px;"/>
            </FormItem>
            <FormItem label="创建时间">
              <Input v-model="order_info.created_time" readonly style="width: 370px;"/>
            </FormItem>
            <FormItem label="收货人手机号">
              <Input v-model="order_info.address_phone" readonly style="width: 370px;"/>
            </FormItem>
            <FormItem label="收货人姓名">
              <Input v-model="order_info.address_name" readonly style="width: 370px;"/>
            </FormItem>
            <FormItem label="收货人地址">
              <Input v-model="order_info.address" readonly style="width: 370px;"/>
            </FormItem>
            <FormItem label="收货人信息">
              <Input v-model="order_info.address_name+' '+order_info.address_phone+' '+order_info.address" readonly style="width: 370px;"/>
            </FormItem>
            <FormItem label="物流公司">
              <Input v-model="order_info.order_send_name" readonly style="width: 370px;"/>
            </FormItem>
            <FormItem label="物流单号">
              <Input v-model="order_info.order_send_code" readonly style="width: 370px;"/>
            </FormItem>
            <FormItem v-if='order_info.state == 1'>
                <Button type="primary" @click="sendOrder(order_info)" style="width: 90px;height: 35px;border-radius: 0;font-size: 14px;">发货</Button>
            </FormItem>
          </Form>
          <Row class="margin-top-10 table_pattern">
            <Table :columns="columns_good" :data="good_list"></Table>
          </Row>
        </Modal>
    </div>
</template>

<script>
    import config from '@/config'
    import Time from '@/tool/Time'
    import { orderList, orderInfo, auditOrder, sendOrder} from '@/api/main'
    export default {
        data() {
            return {
                audit_reasson: '',
                pagenation: {},
                show_order_good: false,
                show_refund_audit: false,
                show_order_info: false,
                show_send_order: false,
                order_info: {},
                order_send_info: {
                  send_name: '',
                  send_code: '',
                },
                refund_info: {
                  result: '1',
                  reason: '',
                },
                filter: {
                  page: 0,
                  order_sn: '',
                  code: '',
                  phone: '',
                  created_at: ['',''],
                  created_at_range: '',
                  state: '-2'
                },
                list: [],
                good_list: [],
                current_order: {},
                columns: [
                    {
                        key: 'phone',
                        title: '用户手机号',
                        render: (h, params) => {
                            return h('strong', params.row.phone)
                        },
                    },
                    {
                        key: 'nickname',
                        title: '用户昵称',
                        render: (h, params) => {
                            return h('strong', params.row.nickname)
                        },
                    },
                    {
                        key: 'invite_nickname',
                        title: '邀请人昵称',
                        render: (h, params) => {
                            return h('strong', params.row.invite_nickname)
                        },
                    },
                    {
                        key: 'invite_code',
                        title: '邀请码',
                        render: (h, params) => {
                            return h('strong', params.row.invite_code)
                        },
                    },
                    {
                        key: 'order_sn',
                        title: '订单编号',
                        render: (h, params) => {
                            return h('strong', params.row.order_sn)
                        },
                    },
                    {
                        key: 'money',
                        title: '订单金额',
                        render: (h, params) => {
                            return h('strong', params.row.money)
                        },
                    },
                    {
                        key: 'return_money',
                        title: '返佣金额',
                        render: (h, params) => {
                            return h('strong', params.row.return_money)
                        },
                    },
                    {
                        key: 'state_name',
                        title: '订单状态',
                        render: (h, params) => {
                            return h('strong', params.row.state_name)
                        },
                    },
                    {
                        key: 'created_time',
                        title: '下单时间',
                        render: (h, params) => {
                            return h('strong', params.row.created_time)
                        },
                    },
                    {
                        title: '操作',
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                              /*h(
                                  'Button',
                                  {
                                      props: {
                                          type: 'primary',
                                          size: 'small',
                                      },
                                      style: {
                                          marginRight: '5px',
                                          border:0,
                                          background:'transparent',
                                          fontSize:'14px',
                                          color:'#377EEF',
                                          //display: params.row.state == 0 ? 'inline-block': 'none'
                                      },
                                      on: {
                                          click: () => {
                                            this.orderGood(params.row)
                                          },
                                      },
                                  },
                                  '商品详情',
                              ),*/
                              h(
                                  'Button',
                                  {
                                      props: {
                                          type: 'primary',
                                          size: 'small',
                                      },
                                      style: {
                                          marginRight: '5px',
                                          border:0,
                                          background:'transparent',
                                          fontSize:'14px',
                                          color:'#377EEF',
                                          //display: params.row.state == 0 ? 'inline-block': 'none'
                                      },
                                      on: {
                                          click: () => {
                                            this.orderInfo(params.row)
                                          },
                                      },
                                  },
                                  '订单详情',
                              ),
                              h(
                                  'Button',
                                  {
                                      props: {
                                          type: 'primary',
                                          size: 'small',
                                      },
                                      style: {
                                          marginRight: '5px',
                                          border:0,
                                          background:'transparent',
                                          fontSize:'14px',
                                          color:'#377EEF',
                                          display: params.row.state == 1 ? 'inline-block': 'none'
                                      },
                                      on: {
                                          click: () => {
                                            this.sendOrder(params.row)
                                          },
                                      },
                                  },
                                  '发货',
                              ),
                              h(
                                  'Button',
                                  {
                                      props: {
                                          type: 'primary',
                                          size: 'small',
                                      },
                                      style: {
                                          marginRight: '5px',
                                          border:0,
                                          background:'transparent',
                                          fontSize:'14px',
                                          color:'#377EEF',
                                          display: params.row.state == 4 ? 'inline-block': 'none'
                                      },
                                      on: {
                                          click: () => {
                                            this.orderAudit(params.row)
                                          },
                                      },
                                  },
                                  '审核',
                              ),
                            ])
                        },
                    },
                ],
                columns_good: [
                    {
                        key: 'good_name',
                        title: '商品名称',
                        render: (h, params) => {
                            return h('strong', params.row.good_name)
                        },
                    },
                    {
                        key: 'unit_price',
                        title: '商品单价',
                        render: (h, params) => {
                            return h('strong', params.row.unit_price)
                        },
                    },
                    {
                        key: 'num',
                        title: '数量',
                        render: (h, params) => {
                            return h('strong', params.row.num)
                        },
                    },
                    {
                        key: 'good_specs',
                        title: '规格',
                        render: (h, params) => {
                            return h('strong', params.row.good_specs)
                        },
                    },
                    {
                        key: 'good_color',
                        title: '颜色',
                        render: (h, params) => {
                            return h('strong', params.row.good_color)
                        },
                    },
                ],
            }
        },
        methods: {
            change: function(page) {
                this.filter.page = page-1
                this.init()
            },
            search: function () {
                this.filter.page = 0
                this.init()
            },
            orderGood(obj) {
              this.good_list = obj.good_list
              this.show_order_good = true
            },
            orderInfo(order) {
              let _this = this
              let obj = {}
              obj.id = order.id
              orderInfo(obj).then(res => {
                if (res.code == 0) {
                  _this.order_info = res.data
                  _this.good_list = res.data.good_list
                  _this.show_order_info = true
                } else {
                  _this.$Message.error(res.text);
                }
              })
            },
            sendOrder(obj) {
              this.current_order = obj
              this.show_send_order = true
            },
            orderAudit(obj) {
              this.current_order = obj
              this.show_refund_audit = true
            },
            orderSendSubmit() {
              let _this = this
              if (_this.order_send_info.send_name == '') {
                this.$Message.error('请输入物流名称');return;
              }
              if (_this.order_send_info.send_code == '') {
                this.$Message.error('请输入物流单号');return;
              }
              let obj = {}
              obj.id = _this.current_order.id
              obj.send_name = _this.order_send_info.send_name
              obj.send_code = _this.order_send_info.send_code
              sendOrder(obj).then(res => {
                if (res.code == 0) {
                  _this.$Message.success('发货成功');
                  _this.show_send_order = false
                  _this.orderInfo(_this.order_info)
                  _this.init()
                } else {
                  _this.$Message.error(res.text);return;
                }
              })
            },
            orderAuditSubmit() {
              let _this = this
              if (parseInt(_this.refund_info.result) == 2 && _this.refund_info.reason == '') {
                this.$Message.error('请输入拒绝理由');return;
              }
              let obj = {}
              obj.id = _this.current_order.id
              obj.result = _this.refund_info.result
              obj.reason = _this.refund_info.reason
              auditOrder(obj).then(res => {
                if (res.code == 0) {
                  _this.$Message.success('审核成功');
                  _this.show_refund_audit = false
                  _this.init()
                } else {
                  _this.$Message.error(res.text);return;
                }
              })
            },
            init() {
              let _this = this
              orderList(_this.filter).then(res => {
                _this.list = res.data
                _this.pagenation.currentPage = parseInt(res.currentPage) + 1
                _this.pagenation.totalPage = parseInt(res.totalPage)
                _this.pagenation.perPage = parseInt(res.perPage)
              })
            }
        },
        watch: {
          'filter.created_at': function () {
              let created_at_start = Time.dateToTimestamp(this.filter.created_at[0])
              let created_at_end = Time.dateToTimestamp(this.filter.created_at[1])
              if (created_at_start !== 0 && created_at_end !== 0) {
                  this.filter.created_at_range = created_at_start + '-' + created_at_end
              } else {
                  this.filter.created_at_range = ''
              }
          },
        },
        mounted() {
          this.init()
        },
    }
</script>
<style lang="less">
  .left{
    width: 100%;
    //padding-left: 50px;
    p{
      color:#333;
      font-size: 14px;
      margin-bottom: 10px;
      line-height: 28px;
    }
  }
</style>
